<template>
	<u-form :model="form" ref="formRef" label-position="top" :error-type="errorType">
		<u-form-item :border-bottom="false" :left-icon="phoneIcon" :left-icon-style="{width:'36rpx',height:'36rpx'}"
			label="手机号" prop="username">
			<u-input type="number" v-model="form.username" height="100" placeholder="请输入手机号码" clearable
				maxlength="11" showWordLimit />
		</u-form-item>
		<u-form-item :border-bottom="false" :left-icon="passworldIcon" :left-icon-style="{width:'36rpx',height:'36rpx'}"
			label="密码" prop="password">
			<u-input type="password" v-model="form.password" height="100" placeholder="请输入密码" maxlength="20" clearable />
		</u-form-item>
		<text class="df forget">忘记密码</text>
		<view class="mgt-20">
			<u-button class="login_btn" shape="circle" :ripple="true" type="primary"
				@click="handleLogin">登录</u-button>
			<u-checkbox-group size="30" class="mgt-28">
				<u-checkbox v-model="checked" shape="circle">
					<view class="fs24">
						登录即代表您已阅读并同意
						<text class="agreement" @click="toAgreeMent">《用户协议》</text>与
						<text class="agreement" @click="toAgreeMent">《隐私政策》</text>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
	</u-form>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, onUnmounted } from "vue";

	import type { FormRightType, FormRightRules } from "../../../static/src/types/login"
	const phoneIcon = "/static/src/login/phone_icon.png";
	const passworldIcon = "/static/src/login/passworld_icon.png";

	const form = ref<FormRightType>({
		username: "",
		password: "",
		grantType:'password'
	})
	const formRef = ref<any>(null);
	const errorType = ref(['message'])
	const rules = ref<FormRightRules>({
		username: [
			{ required: true, message: "请输入手机号", trigger: ['change', 'blur'] },
			{ pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确" },
		],
		password: [
			{ required: true, message: "请输入密码", trigger: ['change', 'blur'] },
		]
	});

	const checked = ref<boolean>(false)
	const emit = defineEmits<{ (e : 'changeData', data : FormRightType) : void }>();

	const handleLogin = () : void => {
		if (!checked.value) {
			uni.showToast({
				title: '请先阅读并同意用户协议和隐私政策',
				icon: 'none'
			});
			return;
		}
		formRef.value.validate((valid : boolean) => {
			console.log(valid, 'valid')
			if (valid) {
				emit('changeData', form.value);
			}
		});
	};

	const toAgreeMent = () => {
		uni.navigateTo({
			url: '/pages/agreement/index'
		})
	}

	onMounted(() => {
		formRef.value.setRules(rules.value);
	});

</script>

<style lang="scss" scoped>
	@import '@/style/style.scss';

	:deep(.u-form-item--left__content__icon) {
		display: flex;
	}

	:deep(.u-form-item--right__content) {
		background: #EEF1FF;
		border-radius: 50rpx;
		padding-left: 23rpx;
		padding-right: 33rpx;
		font-size: 28rpx;
		color: #878999;
	}
	.forget{
		color:#3C51F2;
		justify-content: flex-end;
	}
	.login_btn {
		background: #3C51F2;
		height: 100rpx;
	}

	.agreement {
		color: #3C51F2;
	}
</style>